<template>
  <div class="container">
    <div class="tab">
      <el-button size="medium " @click="adminIsShow">切换登录对象</el-button>
    </div>
    <div v-if="isShow" class="box">
      <div class="transtion-box">
        <div class="reg-box">
          <h2>{{istran ? '欢迎来到咖啡豆旅馆' : '立即注册'}}</h2>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item v-if="!istran" label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item v-if="!istran" label="身份证号" prop="idcard">
                <el-input v-model="form.idcard"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item v-if="!istran" label="再次输入密码" prop="password1">
                <el-input type="password" v-model="password1" show-password></el-input>
            </el-form-item>
                       
            <el-form-item style="margin-left: 38px;">
              <el-button v-if="istran"  @click="toLook">游客浏览</el-button>
              <el-button type="primary" @click="isLogin('form')">{{loginOrLogon}}</el-button>
              
              <el-button v-if="!istran" @click="resetForm('form')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>
      </div>
      <div class="transferToReg" :class="istran" ref="tran">
        <h1 class="title">{{istran ? '还有没有账号？' : '已有账号？'}}</h1>
        <span>{{istran ? '立即注册，发现性价比高的旅馆': '有账号就登录吧，好久不见'}}</span>
        <button @click="tran">{{istran ? '注册' : '登录'}}</button>
      </div>
    </div>
    <div v-if="!isShow">
      <el-card class="box-card">
            <h2>管理员登录界面</h2>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="用户名:" prop="name">
                    <el-input v-model="form.name" style="padding-right: 140px;"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                    <el-input v-model="form.phone"  style="padding-right: 140px;"></el-input>
                </el-form-item>
                <el-form-item label="验证码:" prop="code">
                    <el-input v-model="form.code" style="width: 258px;"></el-input>
                    <el-button size="mini" round @click="sendMessage('form')"  >请求验证码</el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="login('form')" >登录</el-button>
                </el-form-item>

            </el-form>

        </el-card>
    </div>
  </div>

</template>

<script>
 import { login, saveUser } from '@/api/user'
 import {Login, sendCode} from '@/api/employee'
import  validate  from '@/utils/validate'
import md5 from 'js-md5'
export default{
    name:'Login',
    data(){   
        return{
            form:{
              name:'梅梅',
              phone:'13543386472',
              email:'',
              idcard:'',
              password:'123',
              code:''
            },
            password1:'',
            loginOrLogon:'登录',
            istran:true,
            isShow:true
        }
    },
    computed:{   
      rules(){
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (this.password1!== this.form.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return{
          name:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {max:6,message:'最多6个字',trigger:'blur'},
          ],
          email:[
            {required:false,message:'请输入邮箱',trigger:'blur'},
            {type:'email',message:'请输入正确的邮箱地址',trigger:['blur','change']},
          ],
          phone:[
            {required:true,validator:validate.checkPhone,trigger:'blur'}
          ],
          password:[
            {required:true,message:'请输入密码',trigger:'blur',}
          ],
          password1:[
            { required:true,validator: validatePass2, trigger: 'blur' }
          ],
          idcard:[
            {validator:validate.validID,trigger:'blur'}
          ],
          code:[
                {required:true,message:'请输入验证码',trigger:'blur'},
          ]
        }
      }
    },
    methods:{
      isLogin(form){
        this.$refs[form].validate((valid)=>{
            if(valid){
              if(this.loginOrLogon === '登录'){
                let params = {
                  password : md5(this.form.password),
                  name:this.form.name,
                  phone:this.form.phone
                }
                login(params).then((res) =>{

                  let {code,msg,data}=res.data
                  if(code === 1){
                    // localStorage.setItem("uToken",data.uToken)
                    // localStorage.setItem("tokenUser",data.tokenUser)
                    localStorage.setItem('Token',data)
                    this.$router.push({name:"UserRoom"})
                  }else{
                    this.$message.error(msg)
                  }
                })
              }else if(this.loginOrLogon ==='注册'){
                  let params = {...this.form}
                  params.password = md5(this.form.password)
                  // console.log(params);
                  saveUser(params).then(({data}) => {
                    if (data.code ===1) {
                      this.tran()
                      this.$message.success(data.data)
                    }else{
                    this.$message.error(data.msg)
                    }
                  }).catch(err => {
                    this.$message.error('后端异常',err)
                  })

              }
            }
          })
      },
      tran(){
        if(this.istran){
          this.$nextTick ( ()=> {
          const tran = this.$refs.tran
          tran.style.left=0+'px'//本电脑的移动
          this.istran = !this.istran
          this.loginOrLogon = '注册'
        }) 
        }else{
          const tran = this.$refs.tran
          tran.style.left=640+'px'//本电脑的移动
          this.form.password = null
          this.istran = !this.istran
          this.loginOrLogon = '登录'
        }
        
      },
      resetForm(formName) {
        this.form = {}
      },
      
      adminIsShow(){
        this.isShow = !this.isShow
      },
      sendMessage(){
        sendCode({phone:this.form.phone}).then(data =>{
          // console.log('手机号换验证码----',data);
          if(data.data.code === 1){
              this.$message.success(data.data.data)
          }else{
              this.$message.error(data.data.msg)
          }
        }).catch(err =>{
          this.$message.error('连接后端有异常',err)
        })
      },
      login(form){
        this.$refs[form].validate(valid =>{
            if(valid){
                Login(this.form).then(res =>{
                  console.log('登录的数据--------',res);
                    const {code,data,msg} = res.data
                    if(code ==1){
                      localStorage.setItem("aToken",data.aToken)
                      localStorage.setItem("tokenAdmin",data.adminId)
                      this.$router.push({name:"AdminRoom"})
                    }else{
                      this.$message.error(msg)
                    }
                }).catch(err =>{
                    this.$message.error('后端异常',err )
                })
            }
        })
      },
      toLook(){
        localStorage.clear()
        this.$router.push({name:'UserRoom'})
      }
      
    },
    
    mounted(){
      
    }
}
</script>
<style lang="less" scoped>
   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
        width: 100%;
        height: 100vh;
        // background-color: #a05151;
        background: url(../assets/static/login/001.jpg) no-repeat center/100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
       
        .tab{
          margin-bottom: 20px;
        }
        .box {
        width: 900px;
        height: 550px;
        background: #fff;
        border-radius: 20px;
        position: relative;
          .transtion-box {
            position: absolute;
            left: 0;
            transition: 0.5s all ease-in-out;
            .reg-box {
                width: 640px;
                height: 100%;
                display: flex;
                flex-flow: column nowrap;
                align-items: center;
                position: absolute;
                left: 100px;
                padding: 50px 30px;
            }
            h2 {
                margin-bottom: 35px;
            }
           
            .other {
                border: 3px solid #d3dae9;
                background: #fff;
                color: rgb(124, 145, 184);
                font-weight: 600;
            }
            
          }
          .transferToReg {
              width: 260px;
              height: 100%;
              border-radius: 20px;
              position: absolute;
              left: 640px;
              top: 0;
              display: flex;
              flex-flow: column nowrap;
              align-items: center;
              padding: 50px 0;
              color: white;
              transition: all 1s ease-in-out;
              background: linear-gradient(
                      to bottom right,
                      #e72a5c 0%,
                      #c63333 50%,
                      #a90f40 100%
              );
              
              .title {
                  margin-bottom: 10px;
                  transition: all 0.3s ease-in-out;
              }
              button {
                  margin-top: 260px;
                  width: 50%;
                  padding: 8px 0;
                  border-radius: 14px;
                  letter-spacing: 10px;
                  text-indent: 10px;
                  font-size: 18px;
                  color: #fff;
                  border: 3px solid #fff;
                  background: transparent;
                  font-weight: 700;
                  cursor: pointer;
              }
              button:hover {
                  border: 3px solid #206dfc;
              }
            }
        }
        .box-card{
            width: 560px;
            height: auto;
            .el-form{
                padding-top: 20px;
                // .el-input{
                //     // width: 250px;
                // }
            }
        }
    }
</style>